<template>
    <div v-if="axiosOK">
        <div class="RightTitlediv">
            <span class="RightTitle">
                {{axiosData.title}}
            </span>
        </div>
        <div class="MySellingShow">
            <span class="PriceShow">￥{{axiosData.price}}</span>
            <img class="PinkSelling" src="../../assets/PruductDetails/PinkSelling.jpg">
        </div>
        <div class="RightsubTitlediv1">
            <span class="RightsubTitleleft">
                配送
            </span>
            <span class="RightsubTitleRight">
                仅上海，广州，沈阳仓有货！预购从速！
            </span>
        </div>
        <div class="RightsubTitlediv15">
            <span class="RightsubTitleRight15">
                现在付款，最快2月21日发货，2月22日送达
            </span>
        </div>
        <div class="RightsubTitlediv2">
            <span class="RightsubTitleleft">
                运费
            </span>
            <span class="RightsubTitleRight">
                新会员专享首单满38元免邮（限唯品自营商品，部分商品不可用）
            </span>
        </div>
        <div class="RightsubTitlediv3">
            <span class="RightsubTitleleft">
                颜色
            </span>
            <span class="RightsubTitleRight">
                <button class="colorbtn" @click="goldencolor">金色</button>
                <button class="colorbtn" @click="silverycolor">银色</button>
                <button class="colorbtn" @click="blackcolor">黑色</button>
            </span>
        </div>
        <div class="RightsubTitlediv4">
            <span class="RightsubTitleleft">
                尺码
            </span>
            <span class="RightsubTitleRight">
                <button class="sizebtn" @click="sizebtn1">
                    {{axiosData.itemType}}
                </button>
            </span>
        </div>
        <div class="RightsubTitlediv5">
            <span class="RightsubTitleleft">
                数量
            </span>
            <span class="RightsubTitleRight">
                <el-input-number v-model="mynumber" @change="mynum" 
                :min="1" :max="3" class="mynum"></el-input-number>
            </span>
        </div>
        <div class="RightsubTitlediv6" @click="gobuy">
            <button class="buyleftbtn" >
                ￥{{axiosData.price*mynumber}}
            </button>
            <button class="buyrightbtn">
                <span class="buyrightbtnup">
                    ￥{{realsellresult}}
                </span>
                <span class="buyrightbtndown">特卖价 抢></span></button>
                <span class="buyrightinfo">
                    <button class="buyrightinfobtn" disabled="disabled">
                        已选: {{mycolor}} {{mysize}}
                    </button>
                </span>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
    export default {
        name:'XiaoRightChoice',
        data(){
            return{
                axiosOK:0,
                axiosData:'',
                mynumber:1,
                mycolor:'',
                mysize:'',
            }
        },
        methods:{
            goldencolor(){
                this.mycolor='金色'
            },
            silverycolor(){
                this.mycolor='银色'
            },
            blackcolor(){
                this.mycolor='黑色'
            },
            sizebtn1(){
                this.mysize=this.axiosData.itemType
            },
            mynum(){
                console.log(this,'%%%');
                // console.log('数量为:',this.mynumber);
            },
            gobuy(){
                if(this.mycolor == '' || this.mysize == ''){
                    this.$message({
                        message: `请选择颜色和尺寸参数`,
                        type: 'error'
                    });
                    console.log('还没选呢');
                }else{
                    this.$addr.get(`carts/add_to_cart?pid=${this.axiosData.id}&amount=${this.mynumber}`).then(
                        response=>{
                            this.$bus.$emit('gobuyloading',true)
                            setTimeout(() => {
                                this.$bus.$emit('gobuyloading',false)
                            }, 400);
                            this.$router.push({name:'xCart'})
                            console.log('请求获取商品详情成功了',response)},
                        error=>{
                            this.$bus.$emit('gobuyloading',true)
                            setTimeout(() => {
                                this.$bus.$emit('gobuyloading',false)
                            }, 400);
                            console.log('请求获取商品详情失败了',error.message)
                        })
                }
            }
        },
        computed:{
            realsellresult(){
                return Math.round(this.axiosData.price*0.6)*this.mynumber
            }
        },
        mounted(){
            this.$bus.$on('LefttoRight',(axiosData,axiosOK)=>{
                this.axiosData=axiosData,
                this.axiosOK=axiosOK
            })
        },
        beforeDestroy(){
            this.$bus.$off('LefttoRight')
        }
    }
</script>

<style scoped>
.RightTitlediv{
    margin-top: 30px;
}
.RightTitle{
    margin-left: 50px;
    font-size: 16px;
}
.MySellingShow{
    margin-top: 5px;
    display: inline-block;
    height: 120px;
}
.PinkSelling{
    position: absolute;
    min-height:110px;
    max-height: 110px;
    margin-left: -200px;
    width: 47%;
    min-width: 380px;
    max-width: 600px;
    padding-right: 30px;
}
.PriceShow{
    width: 100%;
    position: relative;
    margin-left: 90px;
    font-size: 40px;
    z-index: 2;
    top: 25%;
    font-weight: 600;
    color: white;
}
.RightsubTitlediv1{
    margin-top: 10px;
}
.RightsubTitlediv15{
    margin-top: 10px;
}
.RightsubTitlediv2{
    margin-top: 18px;
}
.RightsubTitleleft{
    opacity: 0.6;
    margin-left: 50px;
    font-size: 12px;
}
.RightsubTitleRight{
    margin-left: 30px;
    font-size: 12px;
}
.RightsubTitleRight15{
    margin-left: 107px;
    font-size: 12px;
}
.RightsubTitlediv3{
    margin-top: 18px;
}
.colorbtn{
    cursor: pointer;
    background-color: transparent;
    height: 20%;
    width: 10%;
    font-size: 12px;
    padding: 6px ;
    margin-left: 5px;
    border: 1px solid rgb(194, 170, 170);
}
.sizebtn{
    cursor: pointer;
    margin-left: 5px;
    background-color: transparent;
    height: 20%;
    width: 150px;
    font-size: 12px;
    padding: 6px;
    border: 1px solid rgb(194, 170, 170);
}
.RightsubTitlediv4{
    margin-top: 18px;
}
.RightsubTitlediv5{
    margin-top: 18px;
}
.mynum{
    height: 30px;
    width: 120px;
}
.RightsubTitlediv6{
    margin-top: 25px;
    margin-left: 60px;
}
.buyleftbtn{
    cursor: pointer;
    background-color: rgb(236, 126, 153);
    border: 0;
    color: white;
    text-decoration: line-through;
    font-size: 30px;
}
.buyrightbtn{
    cursor: pointer;
    border: 0;
    background-color: rgb(228, 67, 102);
    color: white;
    font-size: 30px;
    display: inline-block;
}
.buyrightbtnup{
    font-size: 30px;
}
.buyrightbtndown{
    font-size: 15px;
}
.buyrightinfo{
    margin-left: 8px;
}
.buyrightinfobtn{
    font-size: 12px;
    height: 25px;
    background-color: transparent;
    border: 1px solid rgb(194, 170, 170);
}
</style>